<template>
  <section class="todoapp">
    <HeaDer @add="add" />
    <!-- This section should be hidden by default and shown when there are todos -->
    <SectIon
      :list="res"
      @cut="cut"
      @del="remove"
      :all="all"
      @quanxuan="
        (val) => {
          all = val;
        }
      "
    />
    <!-- This footer should be hidden by default and shown when there are todos -->
    <FooTer :flag="flag" :list="list" @qingchu="qingchu" @change="change" />
  </section>
</template>

<script>
//  (val) => {
//    flag = val;
//  }
import HeaDer from "@/components/header.vue"
import SectIon from "@/components/section.vue"
import FooTer from "@/components/footer.vue"
export default {
  components: {
    HeaDer,
    SectIon,
    FooTer,
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [],

      res: [],

      flag: 1, // 1 显示全部任务； 2 显示进行中； 3 显示已完成

    }
  },
  // ❗❗❗ 第一种一上来页面显示数据的方案
  // 生命周期函数 此时DOM可以显示和操作 一上来先显示全部的数据
  // mounted () {
  //   if (this.flag === 1) {

  //     this.res = this.list

  //     // console.log(this.res)

  //     return this.res
  //   }
  // },
  methods: {
    // 点击删除
    remove (id) {

      // console.log(id)

      this.list = this.list.filter(item => item.id !== id)

      // 不懂为啥加这行 看看控制的 Vue 这是页面展示的数据
      this.res = this.list.filter(item => item.id !== id)

    },
    // 回车添加
    add (val) {
      // console.log(val)

      if (val.trim() !== '') {
        this.list.unshift({
          id: +new Date(),
          name: val,
          isDone: false
        })
      } else {
        return alert('不能输入空的')
      }
    },
    // 点击是否完成
    cut (id, value) {
      // console.log(id, value)

      let res = this.list.find(item => item.id === id)

      res.isDone = value

    },

    //用点击事件写 不用这个了 用新的知识
    // 全选
    // quanxuan (val) {
    //   // console.log(val)
    //   this.list.forEach(item => item.isDone = val)
    // }

    // 清楚已完成
    qingchu () {
      // 这是点击全部任务 或者 进行中删除的数据
      // 因为你点击 全部任务 或者 进行中 res 是根据list筛选的 根本还是 list
      this.list = this.list.filter(item => item.isDone === false)
      // 不懂为啥加这行 看看控制的 Vue 这是页面展示的数据
      this.res = this.list.filter(item => item.isDone === false)

      // 判断一下 如果点击的是已完成显示的肯定都是要删除的 点击删除保险一些让res = []
      if (this.flag === 3) {
        this.res = []
      }

    },

    // 点击是否进行中还是已完成还是全部已完成
    change (val) {

      this.flag = val

      // let res

      // console.log(1)

      // console.log(this.flag)


      if (this.flag === 1) {

        this.res = this.list

        // console.log(this.res)

        return this.res
      }
      if (this.flag === 2) {

        this.res = this.list.filter(item => item.isDone === false)
        // console.log(this.res)

        return this.res
      }
      if (this.flag === 3) {

        this.res = this.list.filter(item => item.isDone === true)
        // console.log(this.res)
        return this.res

      }
    }
  },

  // 侦听器  侦听list数据的变化
  watch: {
    list: {
      // ❗❗❗ 第二种一上来页面显示数据的方案
      handler (val) {
        // 第一个参数是 list数据改变后的值
        console.log(val)

        localStorage.setItem('list', JSON.stringify(val))
        // console.log(1)

        // ❗❗❗ 写这个用途只有在页面一打开的时候页面显示数据的
        // ❗❗❗ 因为加了 immediate: true 页面一打开就会执行里面代码
        // 页面一打开 val 肯定是 list的数据 或者说是没有点击切换 进行中和已完成的 筛选的 list的数据
        // 那不是正好是我想要效果? 页面一打开是全部任务 展示的正是没有改变的原数组
        // ❗❗ 加个判断就行了 切换已完成和 进行中的时候 我觉得是 this.res重置了 所以这里的res没有生效 
        // ❗❗ 加个判断就行了 methods 比 watch 低, this.res先赋值成全部的数据 再是 menthods 里面筛选过后的 this.res
        if (this.flag === 1) {
          this.res = this.list.filter(item => {
            // ❗❗❗ 这样写  res是每一条数据 , item.name 是每个字符串 会隐式转换 true 
            // return item.name

            // ❗❗❗这样写也可以 res也是每一条数据 每个 item.name 都包含 '' 所以是 true , 达到页面显示所有的数据
            return item.name.includes('')
          })
          console.log(this.res) // list的每一条数据
          // console.log(2)
        }

      },

      deep: true,
      immediate: true
    }

  },
  // 全选反选
  computed: {
    all: {
      // 点击小的
      get () {
        // every：要求 item.c 都是true，最终结果才是true；
        return this.list.every(item => item.isDone)
      },
      // 点击全选
      set (val) {
        this.list.forEach(item => item.isDone = val)
      }
    },

  }
}
</script>

<style></style>
